<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import router from "@/router";
import {showDialog, showFailToast} from "vant";
import { showToast } from 'vant';
import {updateUserInfo} from "@/api/user.ts";

const route = useRoute();
const editkey =ref(route.query.editkey);
const editvalue =ref(route.query.editvalue);
const editname =ref(route.query.editname);
const id =ref(route.query.id);

console.log(editvalue.value)

const onSubmit = (values) => {
  // 提交表单
  console.log("hahhah",editvalue.value)
  if (editvalue.value == '男'){
    editvalue.value = 1
  }
  if (editvalue.value == '女')
  {
    editvalue.value = 0
  }

  console.log("hahhah",editvalue.value)
  updateUserInfo({
    id:id.value,
    [editkey.value]:editvalue.value
  })
  .then((res)=>{
    if(res.data.data){
      showToast({
        message: "修改成功",
        icon: 'success',
      });
      router.back();
    }
    else {
      showFailToast(res.data.description);
    }
  }).catch((err)=>{
  })
};

const columns = [
  { text: '男', value: 'boy' },
  { text: '女', value: 'girl' },
];
const fieldValue = ref(editvalue);
const showPicker = ref(false);
const pickerValue = ref<Numeric[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
  console.log(selectedValues, selectedOptions)
  showPicker.value = false;
  pickerValue.value = selectedValues;
  fieldValue.value = selectedOptions[0].text;
};
</script>

<template>
  <van-form @submit="onSubmit" v-if="editkey!='gender'">
    <van-cell-group inset>
      <van-field
          v-model="editvalue"
          :name="editkey"
          :label="editname"
          placeholder="请输入"
          :rules="[{ required: true, message: '必填项' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <van-field v-if="editkey=='gender'"
      v-model="fieldValue"
      is-link
      readonly
      label="性别"
      placeholder="选择性别"
      @click="showPicker = true"
  />
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
        :model-value="pickerValue"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
    />
  </van-popup>
  <div style="margin: 16px;" v-if="editkey=='gender'" >
    <van-button round block type="primary" @click="onSubmit">
      提交
    </van-button>
  </div>
</template>

<style scoped>

</style>